<template>
    <el-dialog v-model="addDialog" title="学生添加" width="800">
        <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" label-width="80" :required="true" prop="name">
                        <el-input autocomplete="off" v-model="formData.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="昵称" label-width="80" prop="nickname">
                        <el-input autocomplete="off" v-model="formData.nickname" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="头像" prop="avatar" class="avatar-s" label-width="80">
                        <el-upload style="border: 1px solid grey;width: 40px;height: 40px" class="avatar-uploader"
                            :action="axios.defaults.baseURL + '/file/upload'" :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <img :src="formData.avatar" class="avatar" v-if="formData.avatar" alt="" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" label-width="80" :required="true" prop="gender">
                        <el-radio-group autocomplete="off" v-model="formData.gender" placeholder="请选择你的性别">
                            <el-radio value="男" label="男"></el-radio>
                            <el-radio value="女" label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" label-width="80" :required="true" prop="telephone">
                        <el-input autocomplete="off" v-model="formData.telephone" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" label-width="80" :required="true" prop="age">
                        <el-input autocomplete="off" v-model="formData.age" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="班级" label-width="80" :required="true" style="width: 248px">
                        <!-- <el-select autocomplete="off" v-model="formData.classId" placeholder="选择班级">
                            <el-option v-for="classList in classList" 
                            :label="classList.className" 
                            :value="classList.id"
                            :key="classList.className" />
                        </el-select> -->
                        <el-select autocomplete="off" v-model="formData.classId" placeholder="选择班级">
                            <el-option :label="className" :value="formData.classId"
                                :key="className" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :sm="12" :xs="24">
                  <el-form-item label="学历" label-width="80" prop="education">
                    <el-select v-model="formData.education" style="width: 168px;">
                      <el-option label="大专" value="大专" />
                      <el-option label="本科" value="本科" />
                      <el-option label="研究生" value="研究生" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" label-width="80" prop="idCard">
                        <el-input autocomplete="off" v-model="formData.idCard" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" label-width="80" prop="birthday">
                        <div class="block">
                            <el-date-picker v-model="formData.birthday" type="date" placeholder="请选择" :size="size"
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 168px;"/>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地区" label-width="80">
                        <div>
                            <el-cascader v-model="formData.nativePlace" placeholder="请选择你的生源地" :options="pcaTextArr"
                                size="large" style="width: 168px"/>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="政治面貌" label-width="80" prop="politicalOutlook">
                        <el-input autocomplete="off" v-model="formData.politicalOutlook" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭住址" label-width="80" prop="address">
                        <el-input autocomplete="off" v-model="formData.address" />
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialog = false">关闭</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
                <el-button @click="save(formRef)" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineEmits, defineModel } from "@vue/runtime-core";
import { reactive, ref } from "vue";
import axios from '@/axios/index.js'
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { pcaTextArr } from 'element-china-area-data';

let addDialog = defineModel('addDialog')
const emit = defineEmits(['loadStudentData'])
let prop = defineProps(['classId','className'])
const formRef = ref()
let className = ref()

let studentId = ref()


let formData = reactive({})

function reset() {
    //初始化数据
    className.value = prop.className
    formData.id = '',
    formData.nickname = '',
    formData.gender = '男',
    formData.age = '',
    formData.telephone = '',
    formData.classId = prop.classId,
    formData.name = '',
    formData.avatar = '',
    formData.education = '',
    formData.idCard = '',
    formData.birthday = '',
    formData.nativePlace = '',
    formData.politicalOutlook = '',
    formData.address = ''
}

reset()

let classList = ref([])

//表单校验
const formRules = reactive({
    name: [{ required: true, minlength: 2, maxlength: 10, pattern: '^[\\u4e00-\\u9fa5]+$', message: '姓名格式不正确,应为2到10个中文字符', trigger: 'blur' }],
    gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
    telephone: [{ required: true, pattern: '^1\\d{10}$', message: '手机号码格式不正确', trigger: 'blur' }],
    age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
    idCard: [{ required: true, pattern: '(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)', message: '身份证号格式不正确', trigger: 'blur' }],
    classId: [{ required: true, message: '班级不能为空', trigger: 'blur' }]
})

//保存用户
function save() {
    axios.post('/student/addStudent', formData).then(resp => {
        ElMessage({
            message: resp.data.message,
            type: resp.data.code == 200 ? 'success' : "error",
            duration: 1500,
            onClose: function () {
                addDialog.value = false
                emit('loadStudentData')
                //清除表单数据
                resetForm()
            }
        })
    })
}

//上传头像
function handleAvatarSuccess(response) {
    formData.avatar = response.data
}

//获取班级列表
// axios.get('/api/v1/class/getClassList').then(resp => {
//     classList.value = resp.data.data.data
// })


//重置表单校验
const resetForm = (formEl) => {
    reset()
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.demo-form-inline {
    margin-left: 30px;
}

.avatar-avatar-s {
    padding: 26px;
    align-items: center;
}

.demo-form-inline el-input {
    --el-input-width: 220px;
}

.demo-form-inline el-radio-group {
    --el-input-width: 220px;
}

.demo-form-inline el-date-picker {
    --el-input-width: 220px;
}

.avatar-uploader-icon {
    margin: 14px;
}

.avatar-uploader el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader el-upload:hover {
    border-color: var(--el-color-primary);
}

el-icon.avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 40px;
    height: 40px;
    display: block;
}
</style>